<template>
  <div class="mod-config">
    <div class="queryData">
      <div class="queryBox">
        <div :class="[{ maxHeiht: arrow }, 'center']">
          <p v-for="i in queryList" :key="i.id">
            {{ i.name }}：
            <span
              v-for="j in i.list"
              :key="j.id"
              :class="[queryObj[i.id] === j.id ? 'active' : '']"
              @click="queryClick(i, j)"
              >{{ j.name }}</span
            >
          </p>
          <i
            :class="[
              arrow ? 'el-icon-arrow-up' : 'el-icon-arrow-down',
              'arrow',
            ]"
            @click="arrow = !arrow"
          />
        </div>
      </div>
    </div>
    <vxeLable
      ref="vxeLable"
      :table-config="tableConfig"
      @edit="editData"
      @del="delData"
      @add="addData"
      @import="importData"
      @export="exportData"
      @checkboxChange="checkboxChange"
    >
      <div slot="header">
        <el-form class="queryForm" :inline="true" label-width="0" :model="form">
          <el-form-item label="">
            <el-input v-model="form.name" size="small" placeholder="名称" />
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary">查询</el-button>
            <el-button size="mini" type="danger">批量删除</el-button>
          </el-form-item>
        </el-form>
      </div>
    </vxeLable>

    <!-- 弹窗, 新增 / 修改 -->
    <elDialog :dialog="dialog">
      <add @close="close" />
    </elDialog>
  </div>
</template>

<script>
import vxeLable from "@/components/common/vxeLable";
import vxeLableJs from "@/components/common/vxeLable.js";
import elDialog from "@/components/common/dialog";
import add from "./add";
export default {
  components: {
    vxeLable,
    elDialog,
    add
  },
  mixins: [vxeLableJs],
  data() {
    return {
      dialog: {
        show: false,
        title: "详情",
        width: "30%"
      },
      queryList: [],
      queryObj: {},
      arrow: false,
      form: {},
      tableConfig: {
        api: "",
        height: 700,
        operateBtns: [
          { emit: "edit", name: "修改", type: "primary" },
          { emit: "del", name: "删除", type: "danger" }
        ],
        toolbarTools: [
          { emit: "add", name: "新增" },
          { emit: "import", name: "导入" },
          { emit: "export", name: "导出" }
        ],
        tableData: [
          {
            id: 10001,
            name: "Test1",
            nickname: "T1",
            role: "Develop",
            sex: "0",
            sex2: ["0"],
            num1: 40,
            age: 28,
            address: "Shenzhen",
            date12: "",
            date13: ""
          },
          {
            id: 10004,
            name: "Test4",
            nickname: "T4",
            role: "Designer",
            sex: "1",
            sex2: ["1"],
            num1: 30,
            age: 23,
            address: "Shenzhen",
            date12: "",
            date13: "2020-12-04"
          },
          {
            id: 10005,
            name: "Test5",
            nickname: "T5",
            role: "Develop",
            sex: "0",
            sex2: ["1", "0"],
            num1: 20,
            age: 30,
            address: "Shanghai",
            date12: "2020-09-20",
            date13: ""
          },
          {
            id: 10006,
            name: "Test6",
            nickname: "T6",
            role: "Designer",
            sex: "1",
            sex2: ["0"],
            num1: 10,
            age: 21,
            address: "Shenzhen",
            date12: "",
            date13: ""
          },
          {
            id: 10007,
            name: "Test7",
            nickname: "T7",
            role: "Develop",
            sex: "0",
            sex2: ["0"],
            num1: 5,
            age: 29,
            address: "test abc",
            date12: "2020-01-02",
            date13: "2020-09-20"
          }
        ],
        tableToolbar: {
          refresh: true,
          zoom: true,
          custom: true,
          slots: {
            buttons: "toolbar_buttons",
            tools: "toolbar_tools"
          }
        },
        tableColumn: [
          { type: "checkbox", width: 60, align: "center" },
          { type: "seq", width: 60, title: "序号" },
          { field: "name", title: "名称" },
          { field: "nickname", title: "上级菜单" },
          { field: "role", title: "图标" },
          { field: "role", title: "类型" },
          { field: "role", title: "排序号" },
          { field: "role", title: "菜单URL" },
          { field: "role", title: "授权标识" },
          {
            title: "操作",
            width: 150,
            align: "center",
            className: "operate",
            slots: { default: "operate" },
            fixed: "right"
          }
        ]
      },
      dataForm: {},
      dataList: [],
      dataListLoading: false,
      addOrUpdateVisible: false
    };
  },
  activated() {
    this.getDataList();
  },
  mounted() {
    this.getQueryList();
  },
  methods: {
    close() {
      this.dialog.show = false;
    },
    getQueryList() {
      this.queryList = [
        {
          name: "技术类型",
          id: "js",
          list: [
            { name: "全部", id: 1 },
            { name: "人脸识别", id: 2 },
            { name: "文字识别", id: 3 },
            { name: "语音技术", id: 4 },
            { name: "自然语音处理", id: 5 }
          ]
        },
        {
          name: "能力类型",
          id: "nl",
          list: [
            { name: "全部", id: 11 },
            { name: "预置", id: 22 }
          ]
        },
        {
          name: "一号类型",
          id: "yi",
          list: [
            { name: "全部", id: 111 },
            { name: "一号预置", id: 222 }
          ]
        },
        {
          name: "二号类型",
          id: "er",
          list: [
            { name: "全部", id: 1111 },
            { name: "二号预置", id: 2222 }
          ]
        },
        {
          name: "三号类型",
          id: "san",
          list: [
            { name: "全部", id: 11111 },
            { name: "三号预置", id: 22222 }
          ]
        }
      ];
      this.queryList.map(i => {
        this.$set(this.queryObj, i.id, i.list[0].id);
      });
    },
    queryClick(i, j) {
      // this.queryObj[i.id] = j.id
      this.$set(this.queryObj, i.id, j.id); // this.queryObj 中动态追加属性必须通过$set
      console.log(this.queryObj);
    },
    aaa(row) {
      console.log(row);
    },
    editData() {
      this.dialog.show = true;
    },
    delData() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    addData() {
      console.log("新增add");
    },
    importData() {
      this.$refs.vxeLable.uploadFileEvent(files => {
        const formBody = new FormData();
        formBody.append("file", files[0]);
        console.log("导入import", formBody);
      });
    },
    checkboxChange(val) {
      console.log(val, "checkbox");
    },
    exportData() {
      console.log("导出export");
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    // 删除
    deleteHandle(id) {
      this.$confirm(`确定对[id=${id}]进行[删除]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl(`/sys/menu/delete/${id}`),
            method: "post",
            data: this.$http.adornData()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getDataList();
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => { });
    }
  }
};
</script>
<style scoped lang="scss">
.queryData {
  height: 1rem;
  font-size: 0.14rem;
  color: #fff;
  position: relative;
  .queryBox {
    position: absolute;
    height: 1rem;
    z-index: 99;
    width: 100%;
    .center {
      background: #10121a;
      height: 100%;
      padding: 0.12rem 0.1rem;
      position: relative;
      overflow: hidden;
      p {
        margin: 0 0 0.15rem 0;
        span {
          margin-left: 0.2rem;
          cursor: pointer;
        }
        span.active {
          color: #efcc2a;
        }
      }
      .arrow {
        position: absolute;
        left: 50%;
        bottom: 0;
        font-size: 0.2rem;
        z-index: 6;
        cursor: pointer;
      }
    }
    .maxHeiht {
      height: auto;
      box-shadow: 0 5px 5px #2d303c;
    }
  }
}
.queryForm {
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>
